<template>
	<view ref="content" class="content">
		<!-- navbar -->
		<NavBar v-if="navbarStatus" />
		<view class="top">
			<image class="top-bg" mode="widthFix" src="@/static/images/top-bg.png"></image>
			<image class="logo-pic" mode="widthFix" src="@/static/images/logo.png"></image>
			<view class="search-bar" @click="goSearch('')">
				<view class="search-bar-icon"></view>
				<input type="text" placeholder="请输入关键词" placeholder-style="color: #fff;" class="search-input"/>
			</view>
			<view class="search-keywords">
				<view class="keyword-tit">推荐:</view>
				<scroll-view :scroll-x="true" class="keyword-scroll">
					<view class="keyword-list">
						<text class="keyword-item" v-for="(item, index) in keywords" :key="index" 
							@click="goSearch(item.name)">{{item.name}}
						</text>
					</view>
				</scroll-view>
			</view>
			<!-- swiper -->
			<view class="swiper-content">
				<u-swiper
					:list="bannerList"
					class="swiper-list"
					previousMargin="30"
					nextMargin="30"
					circular
					indicator
					indicatorMode="dot"
					height="300rpx"
					:autoplay="false"
					radius="5"
					bg-color="rgba(0,0,0,0)"
					@click="onBannerSwiperClick"
				></u-swiper>
			</view>
		</view>
		<!-- middle -->
		<view class="middle">
			<!-- 排行榜 -->
			<view class="rank-box">
				<view class="more-row">
					<SectionMoreLine :jumpPath="'/pages/recommend/recommend'" :title="'佳片榜单'" />
				</view>
				<scroll-view scroll-x class="rank-list-scroll">
					<view class="rank-list">
						<view class="rank-item" @click="goVideoDetail(item.id)" v-for="item in rankList" :key="item.id">
							<view class="rank-top">
								<image class="preview-img" :src="item.images"></image>
							</view>
							<view class="rank-bottom">
								<view class="video-name">{{item.name}}</view>
								<view class="view-row">
									<text class="view-num">{{item.number}}人查看</text>
									<text class="view-btn">去查看</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 影视推荐  -->
			<view class="recommend-box">
				<view class="more-row">
					<SectionMoreLine :jumpPath="'/pages/recommend/recommend'" :title="'影视推荐'" />
				</view>
				<scroll-view scroll-x class="video-list-scroll">
					<!-- cards -->
					<view class="recommend-video-cards">
						<view class="recommend-video-card" v-for="(card, i) in [1, 2]" :key="i">
							<view class="recommend-video-list" v-if="i == 0">
								<block v-for="(item, index) in recommendList" :key="item.id">
									<!-- 偶数 -->
									<view class="recommend-video-item" @click="goVideoDetail(item.id)" v-if="index % 2 === 0">
										<view class="video-left">
											<image class="preview-img" :src="item.images"></image>
										</view>
										<view class="video-right">
											<view class="video-name">{{item.name}}</view>
											<view class="tags">
												<text class="tag">{{item.author}}</text>
											</view>
											<view class="info-row">
												<view class="info-l">
													<text class="info-tip view-num">200浏览</text>
													<text class="info-tip rate-num">{{item.score}}评分</text>
												</view>
												<view class="info-r">
													<text class="time">{{item.home_create_time}}</text>
												</view>
											</view>
										</view>
									</view>
								</block>
							</view>
							<!-- 奇数 -->
							<view class="recommend-video-list" v-if="i == 1">
								<block v-for="(item, index) in recommendList" :key="item.id">
									<!-- 偶数even -->
									<view class="recommend-video-item" @click="goVideoDetail(item.id)" v-if="index % 2 !== 0">
										<view class="video-left">
											<image class="preview-img" :src="item.images"></image>
										</view>
										<view class="video-right">
											<view class="video-name">{{item.name}}</view>
											<view class="tags">
												<text class="tag">{{item.author}}</text>
											</view>
											<view class="info-row">
												<view class="info-l">
													<text class="info-tip view-num">200浏览</text>
													<text class="info-tip rate-num">{{item.score}}评分</text>
												</view>
												<view class="info-r">
													<text class="time">{{item.home_create_time}}</text>
												</view>
											</view>
										</view>
									</view>
								</block>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 视频tab列表 -->
			<view class="video-box">
				<view class="tab-sticky" :style="{top: (menuTop + 44) + 'px'}">
					<u-tabs class="video-tab" 
						@change="onCategoryChange" 
						:list="categories" 
						:is-scroll="true"
						:activeStyle="tabActiveStyle"
						lineHeight="4"
						lineWidth="30"
						lineColor="#50cc99"
						:current="currentTabIndex"
					>
					</u-tabs>
				</view>
				<view class="video-content-box">
					<VideoList :videoList="videoList" />
					<u-loadmore :status="uploadMoreStatus" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import VideoList from '@/components/video-list/video-list';
	import NavBar from '@/components/nav-bar/nav-bar';
	import * as api from '@/api/api';
	export default {
		name: 'index',
		components: {
			VideoList,
			NavBar
		},
		data() {
			return {
				title: '糖人影视',
				menuTop: uni.getMenuButtonBoundingClientRect().top,
				navbarStatus: false,
				phoneModel: '',
				keyword: '',
				keywords: [
					{name: '流浪地球'},
					{name: '中国医生'}
				],
				bannerList: [],
				rankList: [], // 排行榜
				recommendList: [], // 推荐
				currentTabIndex: 0,
				categories: [
					{id: 0, name: '全部'}
				],
				tabActiveStyle: {
					fontSize: '38rpx',
					color: '#000',
					fontWeight: 'bold'
				},
				videoList: [],
				cateId: null,
				currentPage: 1,
				// 加载前loadmore，加载中loading，没有数据nomore
				uploadMoreStatus: 'loadmore',
				isLastPage: false, // 最后一页
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: res => {
					this.phoneModel = res.model;
				}
			})
			this.getBanners();
			this.getRankList();
			this.getRecommendList();
			this.getCategories();
			this.getVideoListByCateId();
		},
		onReady() {},
		mounted() {	
		},
		methods: {
			// banner图
			async getBanners() {
				const {data: res} = await api.getBanners();
				res.data.forEach(item => {
					let obj = {
						url: item.image,
						id: item.id
					};
					this.bannerList.push(obj);
				})
			},
			// 排行榜数据
			async getRankList() {
				const {data: res} = await api.getRankList();
				this.rankList = res.data;
			},
			// 推荐视频
			async getRecommendList() {
				const {data: res} = await api.getRecommendList();
				if (res.code === 1) {
					const recommendList = res.data.slice(0, 6);
					this.recommendList = recommendList;
				}
			},
			// 分类列表
			async getCategories() {
				const {data: res} = await api.getCategories();
				this.categories = this.categories.concat(res.data);
			},
			// 栏目切换
			onCategoryChange(e) {
				this.currentTabIndex = e.index;
				this.cateId = e.id;
				this.currentPage = 1;
				this.videoList = [];
				this.isLastPage = false;
				this.uploadMoreStatus = 'loading';
				this.getVideoListByCateId();
			},
			// 栏目下视频列表
			async getVideoListByCateId() {
				const params = {};
				if (this.cateId) {
					params.categories = this.cateId;
				}
				params.page = this.currentPage;
				const {data: res} = await api.getVideoList(params);
				if (res.code === 1) {
					if (res.data.length < 10) {
							// 到达最后
						this.isLastPage = true;
						this.uploadMoreStatus = 'nomore';
					}
					this.videoList = this.videoList.concat(res.data);
				}
			},
			// banner点击
			onBannerSwiperClick(index) {
				let videoId = this.bannerList[index]['id'];
				uni.navigateTo({url: `/pages/video/video?id=${videoId}`});
			},
			// 视频详情
			goVideoDetail(videoId) {
				uni.navigateTo({url: `/pages/video/video?id=${videoId}`});
			},
			// 搜索
			goSearch(keyword = '') {
				if (keyword) {
					uni.setStorageSync('search_keyword', keyword);
				}
				uni.switchTab({url: '/pages/search/search'});
			},
			// 页面触底事件
			onReachBottom() {
				if (!this.isLastPage) {
					this.uploadMoreStatus = 'loading';
					this.currentPage += 1;
					this.getVideoListByCateId();
				}
			}
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop;
			this.navbarStatus = scrollTop >= 80 ? true : false;
		}
	}
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	height: 100%;
	// height: 2000px;
	min-height: 100vh;
	.top {
		font-size: 28rpx;
		color: #333;
		position: relative;
		font-family: Helvetica Neue, Helvetica, sans-serif;
		padding-top: 100rpx;
		.top-bg {
			width: 100%;
			top: 210px;
			position: absolute;
			top: 0; left: 0;
		}
		.logo-pic {
			position: relative;
			width: 328rpx;
			min-height: 52rpx;
			margin-left: 40rpx;
		}
		.search-bar {
			position: relative;
			width: 690rpx;
			height: 60rpx;
			margin: 25rpx auto 0;
			.search-bar-icon {
				width: 32rpx;
				height: 32rpx;
				background-image: url("https://cloud-minapp-16269.cloud.ifanrusercontent.com/product-search.svg");
				background-size: contain;
				opacity: 0.8;
				filter: brightness(2);
				position: absolute;
				top: 50%; left: 30rpx;
				transform: translateY(-50%);
			}
			.search-input {
				width: 100%;
				height: 100%;
				background: rgba(255, 255, 255, 0.15);
				border-radius: 30rpx;
				font-size: 28rpx;
				color: #fff;
				padding-left: 80rpx;
				box-sizing: border-box;
			}
		}
		.search-keywords {
			width: 690rpx;
			margin: 20rpx auto;
			display: flex;
			align-items: center;
			position: relative;
			z-index: 99;
			.keyword-tit {
				width: 10%;
				font-size: 26rpx;
				color: #fff;
				opacity: 0.6;
				white-space: nowrap;
			}
			.keyword-scroll {
				width: 90%;
				.keyword-list {
					width: 100%;
					white-space: nowrap;
					display: inline-flex;
					align-items: center;
					.keyword-item {
						font-size: 24rpx;
						color: #fff;
						display: inline-block;
						margin-right: 15rpx;
						opacity: 0.6;
					}
				}
			}
		}
	}
	.middle {
		width: 100%;
		margin: 40rpx auto 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		.rank-box {
			width: 690rpx;
			.rank-list-scroll {
				width: 100%;
				margin-top: 26rpx;
				margin-bottom: 26rpx;
				.rank-list {
					white-space: nowrap;
					overflow-x: scroll;
					.rank-item {
						width: 290rpx;
						margin-right: 20rpx;
						box-shadow: 0 12rpx 20rpx 0 rgba(0, 0, 0, 0.04);
						display: inline-block;
						overflow: hidden;
						border: 0.5px solid #ececec;
						border-radius: 18rpx;
						box-sizing: border-box;
						.rank-top {
							width: 100%;
							.preview-img {
								width: 100%;
								height: 240rpx;
								display: block;
							}
						}
						.rank-bottom {
							background-color: #fff;
							position: relative;
							padding: 30rpx 20rpx;
							line-height: 1;
							.video-name {
								font-size: 28rpx;
								color: #141414;
								font-weight: bold;
								line-height: 1;
								white-space: nowrap;
								overflow-x: hidden;
								text-overflow: ellipsis;
							}
							.view-row {
								width: 100%;
								display: inline-flex;
								align-items: center;
								justify-content: space-between;
								margin-top: 10rpx;
								.view-num {
									flex: 1;
									font-size: 24rpx;
									color: #7d7d7d;
									white-space: nowrap;
									text-overflow: ellipsis;
									overflow-x: hidden;
								}
								.view-btn {
									background-color: #50cc99;
									font-size: 20rpx;
									color: #fff;
									padding: 10rpx 20rpx;
									border-radius: 28rpx;
									display: inline-block;
								}
							}
						}
					}
				}
			}
		}
		// recommend-video
		.recommend-box {
			width: 690rpx;
			.video-list-scroll {
				margin: 26rpx 0;
				.recommend-video-cards {
					width: 100%;
					white-space: nowrap;
					.recommend-video-card:nth-child(1) {
						width: 93%;
					}
					.recommend-video-card {
						width: 100%;
						display: inline-block;
						margin-right: 20rpx;
						.recommend-video-list {
							display: flex;
							flex-direction: column;
							.recommend-video-item {
								display: flex;
								flex-direction: row;
								overflow: hidden;
								margin-bottom: 30rpx;
								box-shadow: 0 12rpx 20rpx 0 rgba(0, 0, 0, 0.04);
								border: 0.5px solid #ececec;
								border-radius: 18rpx;
								.video-left {
									width: 200rpx;
									.preview-img {
										width: 200rpx;
										height: 240rpx;
										border-radius: 10rpx;
										display: block;
									}
								}
								.video-right {
									flex: 1;
									margin-left: 30rpx;
									box-sizing: border-box;
									overflow: hidden;
									padding: 0 10rpx;
									.video-name {
										white-space: normal;
										font-size: 28rpx;
										font-weight: bold;
										color: #333;
										display: -webkit-box;
										-webkit-box-orient: vertical;
										-webkit-line-clamp: 2;
										overflow: hidden;
										padding-top: 10rpx;
									}
									.tags {
										margin-top: 40rpx;
										.tag {
											font-size: 24rpx;
											background-color: aliceblue;
											border-radius: 6rpx;
											color: #333;
											padding: 6rpx 14rpx;
											margin-right: 10rpx;
										}
									}
									.info-row {
										width: 100%;
										display: inline-flex;
										align-items: center;
										justify-content: space-between;
										margin-top: 40rpx;
										.rate-num {
											margin-left: 10rpx;
										}
										text {
											font-size: 24rpx;
											color: #71777D;
										}
									}
								}
							}
						}
					}
				}
			}
		}
		.more-row {
			width: 100%;
		}
		// video list
		.video-box {
			width: 100%;
			margin-top: 20rpx;
			position: relative;
			.tab-sticky {
				position: sticky;
				left: 0;
				box-shadow: 0 -1px #FFFFFF;
				z-index: 99;
			}
			/deep/ .u-tabs {
				height: 120rpx;
				background: #fff;
			}
			.video-content-box {
				width: 690rpx;
				margin: 30rpx auto 0;
				padding-bottom: 30rpx;
				position: relative;
				min-height: calc(100vh - 124px);
			}
		}
	}
}

</style>
